// 函数式组件使用 rafce 来创建一个组件
import React, { useState } from 'react'

const App = () => {
    // 因为是函数式组件所有不能使用 this
    // 我们定义数据的时候就不能再通过 state 定义
    // 在函数组件中可以使用 useState 代替原来的 state
    // 可以将 count 理解为  state 中的变量
    // 可以将 setCount 理解为 this.setState
    // 创建一个 count 默认值是 100，后期可以通过 setCount 修改值
    const [count, setCount] = useState(100)


    // 声明一个函数
    function add100(val){
        // setCount(count + val)

        // setCount 的参数也可以写成函数的形式
        // return 出去的内容就是要修改的内容
        setCount((prev)=>{
            return prev + val
        })
    }

  return (
    <div>
        <h1>App - {count}</h1>

        <button onClick={()=>{
            setCount(count + 1)
        }}>加</button>
        <button onClick={()=>{
            setCount(count - 1)
        }}>减</button>
        <button onClick={()=>{
            add100(100)
        }}>加指定数</button>
    </div>
  )
}

export default App